<template>
<section>
  <el-col :span="24" style="padding-top:10px;padding-bottom:10px;">
            <el-button round type="primary" @click="showDialog(0,true)"  size="small" icon="el-icon-plus">新增区域</el-button> 
            <!-- <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['fas','sign-out-alt']"/></i>&nbsp;导入/导出
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导入</el-dropdown-item>
                    <el-dropdown-item>导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> -->
        </el-col>
     <el-table 
    border
    ref="multipleTable"
    :data="areaList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection">
    </el-table-column>
    <el-table-column
      prop="areaName"
      label="区域名称" 
      width="140px"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column 
      label="状态" 
      width="100px">
      <template slot-scope="scope">
        <el-tag v-show="scope.row.status==1" size="mini" type="success">可用</el-tag>
        <el-tag v-show="scope.row.status==5" size="mini"  >已禁用</el-tag>
      </template>
    </el-table-column> 
    <el-table-column 
      label="备注" 
      width="200px"
      prop="note" >
    </el-table-column> 
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
           <el-button
          size="mini"
          @click="handleForce(scope.$index, scope.row)">{{scope.row.status==5?"解禁":"禁用"}}</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <el-col :span="24" class="toolbar">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
        </el-pagination>
    </el-col>

     <el-dialog @close="showDialog(0,false)" title="新增区域" :visible.sync="dialogFormVisible" width="500px">
          
            <el-form :model="addForm" :rules="rules" ref="addForm" size="small" label-width="80px"> 
                    <el-form-item label="区域名称" prop="areaName">
                        <el-input clearable v-model="addForm.areaName"></el-input>
                    </el-form-item>  
                    <el-form-item label="备注" prop="note">
                        <el-input clearable v-model="addForm.note"></el-input>
                    </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
            </div>
        </el-dialog>  
</section>
   
</template>

<script>

import api from "@/service/api";
import http from "@/service/http"; 
export default {
  data() {
    return {
      dialogFormVisible:false, 
      areaList:[],
      currentPage:1,
      pageSize:20,
      totalNum:0,
      type:0,
      targetRow:{
        id:'',areaName:'',note:'',status:''
      },
      addForm:{
        areaName:'',
        note:''
      },
      rules:{
         areaName : [{
          required: true, message: "请输入名称", trigger: "blur"
        }]
      }
    };
  }, 
  methods: { 
			submitForm(formName) { 
      this.$refs[formName].validate(valid => {
        if (valid) { 
          if(this.type==0){
            this.addArea();
          }else{
            this.targetRow.areaName = this.addForm.areaName;
            this.targetRow.note = this.addForm.note;
            this.updateArea(this.targetRow);
          }
        } else {
          return false;
        }
      });
    },
    addArea() {
      let param = {
          areaName:this.addForm.areaName,
          note:this.addForm.note
      }
      http.post(api.sysApi.addArea, param).then(data => {
         if(!data.success){
            return;
        }
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
        }); 
        this.dialogFormVisible = false; 
        this.getAreas();
      });
    },
    updateArea(areaDO){ 
      http.post(api.sysApi.updateArea, areaDO).then(data => {
        if(!data.success){
            return;
        }
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success"
        });  
        this.dialogFormVisible = false
        this.addForm = {};
        this.getAreas();
      });
    },
    handleSelectionChange(val){

    },
    handleSizeChange(val){
      this.pageSize = val;
      this.getAreas();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.getAreas();
    },
    showDialog(type,dialogFormVisible){
      this.type = type;
      this.dialogFormVisible = dialogFormVisible;
      if(!dialogFormVisible){
          this.addForm = {};
      }
    },
    handleEdit(index, row) {  
      this.targetRow = row;
      this.addForm.areaName = row.areaName;
      this.addForm.note = row.note;
      this.showDialog(1,true);
    },
    handleDelete(index, row) {
      this.targetRow.areaName = row.areaName;
      this.targetRow.id = row.id;
      this.targetRow.del = 1;
      this.targetRow.note = row.note;
      this.$confirm('确认删除 [ '+this.targetRow.areaName+' ] 吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { 
                    this.updateArea(this.targetRow);
                }).catch(() => {});
    },
    handleForce(index, row) { 
      this.targetRow.areaName = row.areaName;
      this.targetRow.id = row.id;
      this.targetRow.status = row.status==5?1:5;
      this.targetRow.note = row.note;
      let str = row.status==5?"开放":"禁用";
      this.$confirm('确认'+str+' [ '+this.targetRow.areaName+' ] 吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { 
                   this.updateArea(this.targetRow);
                })
              
    },
    getAreas(){
      let param = { pageNum: this.currentPage, pageSize: this.pageSize };
      http.post(api.sysApi.getAreaList, param).then(data => {
        this.areaList = data.data;
        this.totalNum = data.totalNum;
      });
    }
  },
  mounted(){
       this.getAreas();
  }
};
</script>

<style>
.el-pagination {
  float: right;
} 
</style>
